<template>
  <div class="teach-team bg-fff">
    <p class="teach-title">教学团队</p>
    <div class="teacher-box">
      <div
        class="teacher-list text-center"
        v-for="(item, index) in items"
        :key="index"
      >
        <img class="teacher-img" :src="item.img" />
        <p class="teacher-name">{{ item.name }}</p>
        <p>
          <img
            v-if="item.isNews"
            class="teacher-news margin-right-16"
            src="@/assets/images/tag_new.png"
          />
          <img class="icon-size-20" src="@/assets/images/ic_educationl.png" />
          <span
            class="margin-left-6 margin-right-8 teacher-title vertical-align-middle"
            >{{ item.zw }}</span
          >
          <span class="teacher-xl teacher-title vertical-align-middle">{{
            item.xl
          }}</span>
        </p>
        <p
          class="teacher-desc"
          ref="contentRefs"
          :style="{ maxHeight: item.isOverflowing ? '192px' : 'none' }"
        >
          {{ item.desc }}
        </p>
        <div class="more font-size-14 cursor-pointer" v-if="item.isOverflowing">
          <span class="vertical-align-middle">查看更多</span>
          <span class="icon-size-20 moreArrow vertical-align-middle"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import teacherImg from '@/assets/images/pic_touxiang.png'
const contentRefs = ref([])
const teacherList = ref([
  {
    indx: 0,
    img: teacherImg,
    isNews: true,
    name: '时浩杰',
    zw: '副教授',
    xl: '博士',
    desc: '时浩杰，山东莒南人，男，博士，副教授，硕士生导师。2011年7月毕业于南京农业大学植物病理学专业，主要从事植物病原真菌病害的致病机理及防治、植物-病原物互作的分子机理等方向的研究和教学工作。近年来主持国家自然基金一项，浙江省自然基金各两项，浙江省科技特派员项目二项，横向课题10余项。参与国家自然科学基金项目参与国家自然科学基金项目'
  },
  {
    indx: 1,
    img: teacherImg,
    isNews: false,
    name: '马海杰',
    zw: '副教授',
    xl: '研究生',
    desc: '马海杰-病原物互作的分子机理等方向的研究和教学工作。近年来主持国家自然基金一项，浙江省自然基金各两项，浙江省科技特派员项目二项，横向课题10余项。'
  }
])
onMounted(async () => {
  // 等待DOM更新后检查溢出
  setTimeout(checkOverflow, 0)
})

// 初始化items状态
const initializedItems = teacherList.value.map((item) => ({
  ...item,
  isOverflowing: false
}))
const items = ref(initializedItems)

// 监听 content 变化
watch(contentRefs, async () => {
  await nextTick() // 等待 DOM 更新
  checkOverflow() // 检查溢出
})

// 检查内容是否溢出
const checkOverflow = () => {
  contentRefs.value.forEach((el: any, index) => {
    if (el) {
      items.value[index].isOverflowing = el.scrollHeight > 180
    }
  })
}
</script>

<style lang="scss" scoped>
.teach-team {
  padding: 64px;
  margin-top: 24px;
  box-sizing: border-box;
  border-radius: 12px;
}
.teach-title {
  display: inline-block;
  font-family:
    Alimama ShuHeiTi,
    Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 24px;
  color: #18191a;
  line-height: 30px;
  margin-bottom: 42px;
  border-bottom: 2px solid #0f63ed;
}
.teacher-box {
  overflow: hidden;
}
.teacher-list {
  width: calc((100% - 52px) / 3);
  height: 538px;
  border-radius: 10px;
  border: 1px solid #e6ebf0;
  float: left;
  margin-right: 26px;
  background-image: url('@/assets/images/teacher_bg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  .teacher-img {
    width: 100px;
    height: 100px;
    margin-top: 40px;
  }
  .teacher-name {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 32px;
    margin-top: 20px;
    margin-bottom: 12px;
  }
  .teacher-news {
    width: 46px;
    height: 20px;
  }
  .teacher-title {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #696e76;
    line-height: 22px;
  }
  .teacher-desc {
    font-family:
      PingFang SC,
      PingFang SC;
    font-size: 16px;
    color: #2f3133;
    line-height: 32px;
    margin: 40px 20px 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 6; /* 控制显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 192px; /* 你的指定高度 */
  }
  .more {
    width: 112px;
    height: 32px;
    line-height: 27px;
    border-radius: 16px;
    border: 1px solid #e6ebf0;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 500;
    color: #2f3133;
    padding-left: 13px;
    box-sizing: border-box;
  }
  .moreArrow {
    display: inline-block;
    background-image: url('@/assets/images/ic_more.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .more:hover {
    .moreArrow {
      background-image: url('@/assets/images/ic_more_hover.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    border-color: #0f63ed;
    color: #0f63ed;
  }
}
.teacher-xl::before {
  content: ' | ';
  color: #e6ebf0;
  margin-right: 8px;
}

.teacher-list:nth-child(3n) {
  margin-right: 0;
}
</style>
